<!-- computed和watch -->
<template>
    <!-- <div> 计算属性： {{ showres }} </div>
    <div> 方法：{{ showres2() }} </div> -->
    <!-- {{ t }} -->
    <div>{{ state.count }}</div>
    <button @click="change">改变</button>
</template>

<script setup lang="ts">
    import { ref, reactive, onMounted, computed, watch, watchEffect, toRef, toRefs } from "vue";
    let admin = ref({
        name: '张三',
        friends: [
            {
                name: '李四',
                age: 15
            }
        ]
    })
    let t = ref(1);
    // 传参
    let showres = computed(()=>{
        return new Date()
    })

    let showres2 = ()=>{
        return new Date()
    }

    /* watch */ 
    let count1 = ref(10), count2 = ref(20)
    const state = reactive({ count: 0, age: 1 })
    let stop = watchEffect((onInvalidate)=>{
        console.log(state)
        onInvalidate(()=>{
            // onInvalidate清除副作用
        })
    })
    // 结束watch监听
    stop();

    // watch(count1, (newval, oldval)=>{
    //     console.log(newval, oldval)
    // })
    // 监听多个值
    // watch([count1, count2], (newval, oldval)=>{
    //     console.log(newval, oldval)
    // })

    

    // watch([()=>state.count, ()=>state.age], (newval, oldval)=>{
    //     console.log(newval, oldval)
    // })

    function change() {
        state.count++;
    }
</script>
<style scoped>
</style>